<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">
	<header class="mui-bar mui-bar-nav in-bar">    
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<a href="index.htm" class="mui-icon mui-icon-home mui-pull-left"></a>
		<h1 class="mui-title">评论区</h1>
	</header> 

	<nav class="mui-bar mui-bar-tab" id="bmenus">
		<div class="mui-inline" style="width:100%;">
			<div class="input" id="pinlunBtn" style='text-align: center;color: #AFAFAF;font-size: 12px; margin-left: auto;margin-right: auto'>写评论...</div>
		</div>
	</nav>

	<div id="my-scroll" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!-- 主界面具体展示内容 -->				    
			<div class="box bg-white">
				<div class="pinglun">
					<div class="hd">热门评论</div>
					<div class="bd">
						<li v-for="vo in list">
							<span>{{vo.title}}</span>
							<p>{{vo.content}}</p>
						</li>
						<div id="loadding" class="loadding">
							<span class="mui-spinner"></span>
						</div>
					</div>
				</div>
			</div>
			
        </div>
    </div>

	<div id="writeBox" class="mui-popover mui-popover-action mui-popover-bottom"  style="background: #F2F2F2;">
		<div class="mui-content-padded">
			<textarea type="text" class="mui-pull-left" v-model="content" style="width:100%;height: 100px;font-size: 14px;border-radius: 10px;" placeholder="点评..."></textarea>
			<a class="mui-btn mui-pull-right" :class="{'mui-btn-blue':canSub}" style="margin-bottom: 15px;" v-on:tap="submit">发送</a>
		</div>
	</div>

	<div class="mui-content bg-white">
		
	</div>
</div>

<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
if(request.id=='' || request.id==undefined){
	alert("参数错误");	
	window.history.go(-1);
}

mui.init();
mui.ready(function(){
	//评论菜单
 	mui("#bmenus").on("tap","#pinlunBtn",function () {
 		mui("#writeBox").popover("toggle");
 		$("#writeBox #pinlunTXT").focus();
 	}); 

})

var vm = new Vue({
	el:"#app",
	data:{
		canSub:false,
		content : "",
		list:[],
		page : 0,
		canScroll : 1,
		next : 1
	},
	watch:{
        content(val){//普通的watch监听
        	if (val!=''){
        		this.canSub=true;
        	}else{
        		this.canSub=false;
        	}
        }
    },
	created : function(){		
		this.goPage();//初始加载
	},
	methods: {
		submit:function(){
			if (this.content!=''){
				url = api+'?command=7&user='+uuid+'&id='+request.id;
				mui.ajax(url,{ 
	                    data: this.content, 
	                    dataType: 'json', 
	                    type: 'post',                
	                    success: function(res){
	                    	mui.alert('提交成功',function(){
	                    		window.location.href = 'pinglun.htm?id='+request.id;
	                    	})	                    	
	                    }
	            });
			}
		},

		goPage : function(){
			var that = this;
        	that.canScroll = 0;
        	document.getElementById("loadding").className="loadding";  
			request = {
				command:6,
				id:request.id,
				page:that.page
			};	
			mui.get(api,request,function(res){//文章列表
				document.getElementById("loadding").className="hide"; 	
				that.columns = res.body.columns;
				that.list = that.list.concat(res.body.comments);
				that.next = res.body.next;
				that.canScroll = 1;
			},'json');
		}
	},
	updated : function(){
		var mainScroll = mui('#my-scroll').scroll();
		document.getElementById('my-scroll').addEventListener('scroll', function (e ) {		
			if (mainScroll.maxScrollY > mainScroll.y){
				if(that.canScroll==0 || that.next==0){//不要重复加载				
					return;
				}
				that.page++;   
				that.goPage(that.page);	
			};
		}) 
	}
});

</script>

</body>
</html>